<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>5使用artTemplate</title>
	<!--weui.css仅为快速的做出页面，可删除-->
	<link rel="stylesheet" href="static/weui.css"/>
	<script src="static/zepto.min.js"></script>
	
	<!--artTemplate.js-->
	<script src="artTemplate/template.js"></script>
</head>

<body>
    
	<div class="weui_panel weui_panel_access">
        <div class="weui_panel_hd">文章列表</div>
        <div class="weui_panel_bd js-blog-list">
           
        </div>
    </div>
	
	<!--模板: 注意这里模板与前面的示例不一样了，直接使用一个type="text/html"的script标签存放模板-->
	<script id="js-tmp" type="text/html">
		<div class="weui_media_box weui_media_text">
			<a href="{{ url }}" class="" target="_blank">
				<h4 class="weui_media_title">{{ title }}</h4>
			</a>
			<p class="weui_media_desc">{{ desc }}</p>
		</div>
	</script>
	<!--/模板-->
	
	<script type="text/javascript">
		/*
			artTemplate-3.0 新一代 javascript 模板引擎
			https://github.com/aui/artTemplate
			
			template.js (简洁语法版, 2.7kb)
			
			支持if等语句{{ if admin }}   {{/if}}
			
			template(id, data)
			根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
			如果没有 data 参数，那么将返回一渲染函数。
			
			
			性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）
			支持运行时调试，可精确定位异常模板所在语句（演示）
			对 NodeJS Express 友好支持
			安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
			支持include语句
			可在浏览器端实现按路径加载模板（详情）
			支持预编译，可将模板转换成为非常精简的 js 文件
			模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选
			支持所有流行的浏览器
		*/

		$(function(){
			$.ajax({
				url: 'static/blog.json',
				type: 'get',
		        dataType: 'json',
		        success: function (response) {
					var htmlList = '';
					var data = response.list;

					//本例不再需要手动取模板内容
					//var htmlTemp = $("textarea.js-tmp").val();

					$.each(data, function(i,el) {
						//htmlList += htmlTemp.temp(el);
						//htmlList += laytpl(htmlTemp).render(el);
						//htmlList += _.template(htmlTemp)(el);
						
						htmlList += template("js-tmp", el); //注意第一个参数是id
					});

					$('.js-blog-list').empty().append(htmlList);
		        },
				error: function (jqXHR, textStatus, errorThrown) {
					if (textStatus == 'timeout') {
						alert('请求超时');
						return false;
					}
					console.log(jqXHR.responseText);
				},
			});
		});
	</script>
	<script src="static/tj.js"></script>
</body>